<template>
	<view class="page">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="show scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="scroll-Y-page">
				<view class="news">
					<view class="list"  v-for="(item,index) in newspagelist" :key='item.id'>
						<!-- 只有一张图张图 -->
						<view class="listleft" @click="goDetail(item)">
							<view class="news_title">{{item.title}}</view>
							<view class="from">
								<view class="fromtext">来源：{{item.auth}}·{{item.publish_time}}</view>
								<text v-if="item.is_top==1" class="toptip">置顶</text>
								<text v-else class="sc">{{item.stored}}人收藏</text>
							</view>
						</view>
						<image :src="baseURL+item.pic_utl" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 支付弹窗 -->
		<view class="cgts" v-if="showSuccess">
			<view>
				<uni-icons :type="'close'" :size="'30'" @click="showSuccess=false"></uni-icons>
				<text>您现在不能查看，需要提升会员等级或者单独购买！</text>
				<view class="buts">
					<button type="primary" @click="pay">￥{{price}}</button>
					<button type="primary" @click="chargeVip">提升会员</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
	components: {
		uniIcons
	},
    data() {
        return {
				baseURL:this.$API.baseURL,
				current:0,
				records:0,
				recordslist:[],
				tancshow:false,
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				//首页底部固定的条数
				newlist:[],
				
				/*轮播*/
				IndexLunboArr:[],
				//企业健康指数
				CompanyPoint: 0,
				CompanyScore: 0,
				bollTopPx: '126px',
				bollTopTimer: null,
				//显示咨询
				showscrollY:false,
				//是否为出发隐藏咨询
				hidescrollY:false,
				//资讯轮播当前
				ZXSwiper:0,
				//咨询分类列表
				tabBars: [],
				page:1,
				rows:10,
				scrollLeft: 0,
				tabIndex: -1,//咨询列表第一次不选中
				newspagelist:[],
				
				// 支付弹窗
				showSuccess:false,
				price:0,
				newsid:''
        };
    },
	onLoad(e){
		this.keyword = e.keyword;
		this.lists_zxdetail()
	},
    methods: {
		//立即购买文章
		pay() {//获取支付信息
			let _this = this;
				uni.request({
					url: this.$API.wxpay,
					method:"GET",
					data: {
						pay_price: parseInt(this.price * 100),
					},
					success: (result) => {
						var orderInfo = result;
						if (orderInfo.statusCode != 200) {
							uni.showModal({
								content: "获得订单信息失败",
								showCancel: false
							})
							return;
						}
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: orderInfo.data,
							success: (e) => {
								uni.showModal({
									content: "支付成功",
									showCancel: false,
									success() {
										_this.buyNews();
									}
								});
								
							},
							fail: (e) => {
								uni.showModal({
									content: "支付失败",
									showCancel: false
								})
							},
							complete: () => {
								
							}
						})
					},
					fail: (e) => {
						// res(result)
					}
				})
		},
		//支付之后录入
		buyNews(){
			var _this = this;
			uni.request({
				url:this.$API.isBuy,
				method:"GET",
				data:{
					userid:uni.getStorageSync("userid"),
					newsid:this.newsid,
					type:'news'
				},
				header:this.$API.get_head(),
				success: (res) => {
					if(res.data){
						_this.showSuccess = false;
						// uni.navigateTo({
						// 	url: '/pages/news/list2detail-detail?data=' + e
						// })
					}else{
						_this.showSuccess = true;
					}
				},
				fail: () => {
					uni.showToast({
						title:"加载失败",
						icon:'none'
					})
				}
			})
		},
		//跳转到购买会员
		chargeVip(){
			uni.navigateTo({
				url:"/pages/newpages/vip"
			})
		},
		//跳转详情页面
		goDetail(e) {
			this.price = e.price;
			this.newsid = e.id;
			
			
			var _this = this;
			if(uni.getStorageSync("vip_status") < e.need_vip){
				//检查是否购买了该文章
				uni.request({
					url:this.$API.isBuy,
					method:"GET",
					data:{
						userid:uni.getStorageSync("userid"),
						newsid:_this.newsid,
						type:'news'
					},
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data){
							_this.showSuccess = false;
							uni.navigateTo({
								url: '/pages/news/list2detail-detail?data=' + _this.newsid
							})
						}else{
							_this.showSuccess = true;
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
				return false;
			}
			uni.navigateTo({
				url: '/pages/news/list2detail-detail?data=' + _this.newsid
			})
		},
		// data:{page:this.page,rows:this.rows,where:"{name:'"+encodeURIComponent(this.keyword)+"'}"},
			/**分类列表下的数据
			 * @param {Object} id 文章类别id
			 * @param {Object} j  文章类别列表索引
			 */
			lists_zxdetail(){
				var _this = this;
				_this.loadMoreStatus = true;
				uni.request({
					url:this.$API.ttNews_list,
					method:"GET",
					data:{
						page:_this.page,
						rows:_this.rows,
						where:{status:1,title:encodeURIComponent(_this.keyword)},
						sort : "is_top desc,publish_time",
						order : "desc"
					},
					header:this.$API.get_head(),
					success: (res) => {
						res.data.rows.forEach(function(v,i){
							v.tags?v.tags=v.tags.split(','):'';
						})
						_this.newspagelist =_this.newspagelist.concat(res.data.rows);
						_this.loadMoreStatus = false;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
						_this.loadMoreStatus = false;
					}
				})
			},
			upper: function(e) {
			    console.log(e)
			},
			lower: function(e) {
				this.page++;
				this.lists_zxdetail()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
    },
};
</script>

<style>
	@keyframes roll {
		form {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.shuiqiu {
		width: 126px;
		height: 126px;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
	}

	.shuiqiucontent {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}

	.shui {
		position: absolute;
		width: 1000px;
		height: 1000px;
		top: 126px;
		left: 50%;
		margin-left: -500px;
	}

	.shui1 {
		border-radius: 47.5%;
		background: #607d8bbe;
		animation: roll 10s linear infinite;
	}
	.shui1.red{background:#c8153f;}
	.shui1.blue{background:#3B81E3;}
	.shui1.yellow{background:#ffd300;}

	.shui2 {
		border-radius: 48%;
		background: #607d8b9a;
		animation: roll 14s linear infinite;
	}
	.shui2.red{background:#BC0A3E;}
	.shui2.blue{background:#3E83E5;}
	.shui2.yellow{background:#FCCE17;}

	.shui3 {
		border-radius: 48.5%;
		background: #607d8bab;
		animation: roll 12s linear infinite;
	}
	.shui3.red{background:#BC0D3E;}
	.shui3.blue{background:#3E86E8;}
	.shui3.yellow{background:#FACE17;}

	.shui4 {
		border-radius: 49%;
		background: #607d8b44;
		animation: roll 20s linear infinite;
	}
	.shui4.red{background:#BC083B;}
	.shui4.blue{background:#3E86EA;}
	.shui4.yellow{background:#F9CE17;}

	.shui5 {
		border-radius: 49.5%;
		background: #607d8b9f;
		animation: roll 16s linear infinite;
	}
	.shui5.red{background:#BB0D3E;}
	.shui5.blue{background:#3E83E3;}
	.shui5.yellow{background:#F7CE17;}

	.shui6 {
		border-radius: 50%;
		background: #607d8b38;
		animation: roll 19s linear infinite;
	}
	.shui6.red{background:#BB0A3B;}
	.shui6.blue{background:#367EE3;}
	.shui6.yellow{background:#F5CE17;}
</style>

<style lang="less">
	page{
		background: #F2F2F2;
		height:auto;
	}
	@keyframes myhide{
		from {top:0%;}
		to {top: 100%;}
	}
	@keyframes myshow{
		from {top: 100%;}
		to {top: 0%;}
	}
	.scroll-Y.show{
		// animation: myshow 1s;
		top: 0%;
	}
	.scroll-Y.hide{
		animation: myhide 1s;
		top: 100%;
	}
	.he100{
		height:100%;
	}
	/*资讯*/
	.pages{
		width:100%;
		// height:100%;
		overflow: hidden;
	}
	.scroll-Y{
		height:100%;
		position:fixed;
		bottom: 0;
		top:100%;
		left: 0;
		right: 0;
		z-index: 9999;
		.scroll-Y-page{
			// background:url(../../static/zixun/4.png) no-repeat;
			background-size:100% 100%;
			height:100%;
			
			/*轮播*/
			swiper {
				height: 300upx !important;
				margin: 0 30upx !important;
				border-radius: 10upx;
				padding: 0;
				image{
					width:100%;
					height: 300upx;
					border-radius: 10upx;
				}
			}
			.indicatorDots{
				display: flex;
				justify-content:center;
				margin: 20upx 0;
				padding: 0;
				.indicatorDotList{
					width:26upx;
					min-width: 26upx;
					height: 26upx;
					margin-right:18upx;
					image{
						width:26upx;
						height: 26upx;
					}
				}
				.indicatorDotList:last-child{
					margin-right:0upx;
				}
			}
		}
		.search{
			display: flex;
			margin:20upx 30upx;
			align-items: center;
			.back{
				width:24upx;
				min-height: 24upx;
				height:37upx;
				margin-right:20upx;
			}
			
			.searchBox{
				display: flex;
				width:100%;
				height:55upx;
				border-radius:10upx;
				background:#FFFFFF;
				align-items: center;
				justify-content: center;
				image{
					width:35upx;
					height:35upx;
					margin-right:20upx;
				}
				text{
					font-size:24upx;
					color:#828282;
				}
			}
			
		}
		.scrollbox{
			margin: 0 30upx;
			.uni-swiper-tab{
				border-bottom:0;
				.swiper-tab-list{
					width: auto;
					color:#FFFFFF;
					margin-right:67upx;
					font-size:27upx;
				}
				.active{
					color:#d7b262;
					font-size:37upx;
				}
			}
			
		}
	
		.news{
			background:#FFFFFF;
			.list{
				// margin:30upx 30upx 0;
				padding:30upx 30upx 0;
				display:flex;
				.listleft{
					width:100%;
					height:166upx;
					position: relative;
					.news_title{
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size:27.7upx;
						color:#333333;
						font-weight:700;
					}
					.from{
						position: absolute;
						width: 100%;
						bottom: 0;
						display: flex;
						font-size:22upx;
						color:#666666;
						align-items:center;
						.fromtext{
							width:100%;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
						.toptip{
							white-space: nowrap;
							margin-left:auto;
							background:#fcc4c4;
							color:#ff0000;
							padding:0upx 10upx;
							border-radius:10upx;
						}
						.sc{
							white-space: nowrap;
							margin-left:auto;
						}
					}
					
					.image{
						display: flex;
						margin: 20upx 0 0;
						justify-content:space-around;
						image{
							margin:0;
							margin-right: 10upx;
						}
						image:last-child{
							margin:0;
						}
					}
				}
				.listleft.hasimage{
					height:auto;
				}
				image{
					width:236upx;
					min-width:236upx;
					height: 166upx;
					border-radius:10upx;
					margin-left:20upx;
				}
			}
			.list:last-child{
				padding-bottom:30upx;
			}
		}
	}
	

</style>
<style>
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	}
	.title{
		height:98upx;
		text-align: center;
		font-size:36upx;
		line-height:98upx;
		color: #333333;
		position:relative;
		z-index: 10;
	}
	.top{width:100%;background: #007AFF;
		position:relative;
		height:436upx;
	}
	.bgtou{
		width:100%;
		height:436upx;
		position:absolute;
		z-index: 1;
	}
	.yuan{
		width: 230rpx;
		height: 230rpx;
		border-radius: 50%;
		position: absolute;
		top: 159rpx;
		left: 257rpx;
		right: 0;
		bottom: 0;
		/* background:#c8153f; */
		z-index: 2;
	}
	.backgrdRed{
		background:#c8153f;
	}
	.backgrdblue{
		background:#368ce6;
	}
	.backgrdyellow{
		background:#ffd300;
	}
	.yuan .num{
		position: absolute;
		color: #fff;
		font-size: 100upx;
		text-align: center;
		width: 100%;
		line-height: 200upx;
	}
	.yuan .fen{
		position: absolute;
		top: 40upx;
		right: 30upx;
		color: #fff;
		font-size: 20upx;
	}
	.yuan .zi{
		position: absolute;
		width: 100%;
		text-align: center;
		color: #fff;
		bottom: 30rpx;
		font-size: 23rpx;
	}
	.yuan .zi text{
		display: inline-block;
		border: 1upx solid #ab8374;
		padding: 8upx 10upx;
		border-radius: 20upx;
		line-height: 1;

	}
	
	.title .left{position:absolute;left:20upx;top:0;width:90upx;height:37upx;z-index: 11;}
	.title .left image{width:42upx;height:37upx;z-index: 12;}
	.title .left text{
		display: inline-block;
		width: 25upx;
		height: 25upx;
		border-radius: 50%;
		position: absolute;
		left: 50upx;
		top: -9upx;
		background: red;
		font-size: 15upx;
		color: #fff;
		line-height: 25upx;
		text-align: center;
		z-index: 13;
	}
	.title .right{position:absolute;right:20upx;top:0;width:39upx;height:39upx;}
	
	.card{background:#FFFFFF;margin-bottom:10upx;}
	.weiTitle{padding:8upx 24upx;}
	.weiTitle text{color: #2892ff;font-size:36upx;padding-left: 20upx;border-left:12upx solid #2892ff;font-weight:bold;}
	.weiTitle image{width: 12upx;height:24upx;float: right;margin-top:22upx;}
	.row{margin:0 15upx;}
	.row>.list{display:flex;padding:12upx 25upx;border-bottom:1upx #ededed solid;}
	.row>.list>image{width:161upx;min-width:161upx;height: 101upx;margin-right:20upx;}
	.newTitle{color: #313131;font-size:28upx;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;font-weight:bold;width:100%;}
	.newD{color:#707070;font-size:16upx;overflow: hidden;	text-overflow:ellipsis;width:100%;}
	
	.newCont{width:100%;}
	
	.swiper-item{display: flex;justify-content:flex-start;padding-top:10upx;}
	.swiper-item>view{width: 25%;position: relative;display: flex;flex-direction: column;justify-content: flex-end;}
	.swiper-item>view .num{
			display: inline-block;
			width: 25upx;
			height: 25upx;
			border-radius: 50%;
			position: absolute;
			left: 105upx;
			top: -9upx;
			background: red;
			font-size: 15upx;
			color: #fff;
			line-height: 25upx;
			text-align: center;
	}
	
	.swiper-item .text{text-align: center;color:#333333;font-size:26upx;font-weight: 600;margin-top:14upx;}
	.h60{display: flex;align-items: flex-end;}
	.h60 image{margin: 0 auto;display: block;}
	swiper{height:145upx;padding:40upx 0 35upx;}
	.indicatorDots{display: flex;padding:0 0 35upx 0;justify-content: center;}
	.indicatorDots .Dot{width: 40upx;height: 10upx;background:#93c8ff;margin-right:12upx;border-radius:10upx;}
	.indicatorDots .Dot:last-child{margin-right:0;}
	.indicatorDots .Dot.active{background:#2892ff;}
	.daiban{display: flex;padding:28upx 41upx;align-items: center;position:relative;}
	.daiban .hu{width:85upx;height:85upx;min-width:85upx;min-height:85upx;margin-right:37upx;}
	.daiban .hu2{width:55upx;height:55upx;min-width:55upx;min-height:55upx;margin-right:22upx;}
	.daiban .shixiang{
		width:360upx;
		line-height:1.3;
		margin-top:10upx;
	}
	.daiban .shixiang .list{
		width:360upx;
		font-size:20upx;
		color:#333333;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.daiban .daiban_letfmore{width: 12upx;height: 21upx;position:absolute;top:72upx;right: 32upx;}

	.tanc .mark{position:fixed;z-index:9998;top: 0;bottom: 0;left: 0;right:0;background:rgba(0,0,0,.6);}
	.tanc .tigBox{position:fixed;z-index:9999;top:0;bottom: 0;left: 0;right:0;width:570upx;margin: auto;height:620rpx;}
	.tanc .tigBox>image{width: 118upx;height:124upx;display:block;margin:0 auto 26upx;}
	.tanc .kuang{width: 570upx;height:328upx;background:url(../../static/cut/baikuang.png) no-repeat;background-size:100% 100%;}
	.tanc .kuang>view{padding:68upx 55upx;color:#FFFFFF;font-size: 24upx;}
	.btns{display: flex;justify-content: center;margin-top: 59upx;}
	.btns>image{height: 85upx;width: 274upx;}
	.btns>image:first-child{margin-right:23upx;}


/* //首页底部固定的条数新闻样式 */
	.row {
		margin: 0 15upx;
		height:668upx;
	}
	
	.row>.list {
		display: flex;
		padding: 30upx 25upx;
		border-bottom: 1upx #ededed solid;
	}
	
	.row>.list>image {
		width: 161upx;
		height: 101upx;
		margin-right: 30upx;
	}
	
	.newTitle {
		width: 420upx;
		color: #313131;
		font-size: 28upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: 700;
		
	}
	
	.newD {
		width: 420upx;
		color: #707070;
		font-size:24upx;
		line-height:1.2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	/*弹窗*/
		.cgts{
			width: 100%;
			height: 100%;
			background: #007AFF;
			position: fixed;
			top:0;
			background: rgba(0,0,0,.5);
			z-index:99999;
		}
		.cgts>view{
			width: 460upx;
			height: 320upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius:10upx;
			background: #fff;
			box-sizing: border-box;
			padding:70upx 38upx;
			position:relative;
		}
		.cgts .uni-icon.uni-icon-close{
			position: absolute;
			right:20upx;
			top:20upx;
		}
		.cgts text{
			font-size:30upx;
			font-family:Microsoft YaHei;
			font-weight:bold;
			text-align: center;
			display: block;
			width: 100%;
			margin-bottom: 45upx;
			color:rgba(66,66,66,1);
		}
		.cgts .buts{
			display: flex;
			justify-content: space-around ;
		}
		.cgts .buts button{
			width:170upx;
			font-size:28upx;
			display: inline-block;
		}
		.cgts .buts button:first-child{
			background-color:transparent;
			border:none;
			color: #D81E06;
		}
</style>
